<template>
  <glsx-dialog :show="value" title="选择材料" @close="closeDialog()">
       <!-- @selection-change="selectionChange" -->
    <div class="">
      <el-table
        ref="materialTable"
        class="el_table"
        :data="tabData"
        border
        size="small"
        @select="selectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="materialName" label="材料名称">
          <template slot-scope="{ row }">
            <TabMaterial :info="showFormatter(row)"></TabMaterial>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderTime"
          label="排序时间"
          show-overflow-tooltip
        />
        <el-table-column
          prop="createdDate"
          label="创建时间"
          show-overflow-tooltip
        />
        <el-table-column prop="creator" label="创建人" show-overflow-tooltip />
      </el-table>
    </div>
    <div slot="footer">
      <el-button type="primary" size="small" @click="saveInfo()"
        >确定</el-button
      >
      <el-button type="default" size="small" @click="closeDialog()"
        >取消</el-button
      >
    </div>
  </glsx-dialog>
</template>
<script>
import { showToast, deepClone } from "@/common/util";
import { GET_QUALIFICATION_MATERIAL_SEARCH } from "@/http/information";
import TabMaterial from "@/components/material/index.vue";
export default {
  name: "ChooseMaterial",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  components: {
    TabMaterial,
  },
  data() {
    return {
      tabData: [],
      checkList: [],
    };
  },
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    // 关闭弹框
    closeDialog() {
      this.$emit("input", false);
      this.tagList = [];
    },

    // 获取列表
    getList() {
      let _this = this;
      let oParams = {};
      oParams.pageNumber = 1;
      oParams.pageSize = 10000;
      let list = this.list || [];
      GET_QUALIFICATION_MATERIAL_SEARCH(oParams).then((res) => {
        let obj = res.data || {};
        let aList = obj.list || [];
        this.tabData = aList;

        if (list && list.length > 0) {
          list.map((k) => {
            let o = aList.find((j) => j.id == k.id);
            console.log(o)
            setTimeout(function(){
_this.$refs.materialTable.toggleRowSelection(o, true);
            },100)
          });
        }
      });
    },

    // 格式化数据
    showFormatter(row) {
      if (!row) {
        return {};
      }
      let o = deepClone(row);
      o.name = o.materialName;
      o.hospitalName = o.belongCompany;
      o.city = o.materialOriginPlace;
      return o;
    },

    // 监听表格勾选
    selectionChange(e) {
      console.log(e);
      this.checkList = e;
    },

    // 保存数据
    saveInfo() {
      let list = this.checkList;
      if (!list || list.length <= 0) {
        showToast({
          message: "请选择材料",
        });
        return false;
      }
      this.$emit("change", list);
      this.$emit("input", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.el_tag {
  margin: 0 10px 10px 0;
}
</style>